<template>
    <div class="dashboard-page">
        <div class="statistical-bar">
          <el-row :gutter="20">
            <el-col :span="6">
              <div class="card card-stats">
                <div class="card-header card-header-icon">
                  <div class="card-icon card-icon-warning">
                    <i class="fa fa-user-o"></i>
                  </div>
                  <p class="card-category">新增用户数/总用户数</p>
                  <h3 class="card-title">10/50
                    <small>人 </small>
                  </h3>
                </div>
                <div class="card-footer">
                  <div class="stats">
                    <i class="el-icon-date"></i> 最近一周
                  </div>
                </div>
              </div>
          </el-col>
          <el-col :span="6">
              <div class="card card-stats">
                <div class="card-header card-header-icon">
                  <div class="card-icon card-icon-success">
                    <i class="fa fa-comments-o"></i>
                  </div>
                  <p class="card-category">新增评论数/总评论数</p>
                  <h3 class="card-title">1/200
                    <small>条 </small>
                  </h3>
                </div>
                <div class="card-footer">
                  <div class="stats">
                    <i class="el-icon-date"></i> 最近一周
                  </div>
                </div>
              </div>
          </el-col>
          <el-col :span="6">
              <div class="card card-stats">
                <div class="card-header card-header-icon">
                  <div class="card-icon card-icon-danger">
                    <i class="el-icon-star-off"></i>
                  </div>
                  <p class="card-category">新增点赞数</p>
                  <h3 class="card-title">50
                    <small>个 </small>
                  </h3>
                </div>
                <div class="card-footer">
                  <div class="stats">
                    <i class="el-icon-date"></i> 最近一周
                  </div>
                </div>
              </div>
          </el-col>
          <el-col :span="6">
              <div class="card card-stats">
                <div class="card-header card-header-icon">
                  <div class="card-icon card-icon-info">
                    <i class="el-icon-tickets"></i>
                  </div>
                  <p class="card-category">文章</p>
                  <h3 class="card-title">120
                    <small>篇 </small>
                  </h3>
                </div>
                <div class="card-footer">
                  <div class="stats">
                    <i class="el-icon-date"></i> 截止到今天
                  </div>
                </div>
              </div>
          </el-col>
          
          </el-row>
        </div>
        <div class="dashboard-content">
          <el-row :gutter="20">
            <el-col :span="8">
              <div class="card">
                <div class="card-header">
                  <p class="card-category card-header-primary">系统信息</p>
                </div>
                <div class="card-body">
                  <ul>
                      <li>运行环境：</li>
                      <li>php版本：</li>
                      <li>nginx版本：</li>
                      <li>mysql版本：</li>
                      <li>redis版本：</li>
                      <li>程序版本：</li>
                      <li>程序制作人：SD</li>
                  </ul>
                </div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="card">
                <div class="card-header">
                  <p class="card-category card-header-info">最热文章</p>
                </div>
                <div class="card-body">
                    <ul>
                      <li v-for="(article, index) in articleList" :key="index">
                        {{article}}
                      </li>
                    </ul>
                </div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="card">
                <div class="card-header">
                  <p class="card-category card-header-success">最新评论</p>
                </div>
                <div class="card-body">
                    <ul>
                      <li v-for="(article, index) in articleList" :key="index">
                        {{article}}
                      </li>
                    </ul>
                </div>
              </div>
            </el-col>
          </el-row>  
        </div>
    </div>
</template>

<script>
  export default {
    name: 'Dashboard',
    data() {
      return {
         articleList:[
            '[多图]就凭这几点 Mate 20 Pro碾压果XS稳了',
            '“困兽”罗永浩：老罗这么用力 为何却总也成不了？',
            'Q3国内手机市场销量排名：华为双品牌稳居第一 荣耀爆发力尽显',
            'Mate 20系列售价向iPhone看齐，能让华为手机更成功？',
            '手机RAM容量超越电脑 DIY玩家表示无法淡定',
            '女大学生没带饭卡转账后举报食堂阿姨？校方回应',
            '[多图]就凭这几点 Mate 20 Pro碾压果XS稳了',
            '“困兽”罗永浩：老罗这么用力 为何却总也成不了？',
            'Q3国内手机市场销量排名：华为双品牌稳居第一 荣耀爆发力尽显',
            'Mate 20系列售价向iPhone看齐，能让华为手机更成功？',
            '手机RAM容量超越电脑 DIY玩家表示无法淡定',
            '女大学生没带饭卡转账后举报食堂阿姨？校方回应',
         ]
      }
    },
  
  }

</script>

<style lang="scss" scoped>
  .dashboard-page{
    margin-top:30px; 
    .statistical-bar {
      margin-bottom: 20px;
      .card {
        box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.14);
        margin: 30px 0px;
        border-radius: 6px;
        color: #333333;
        background: #fff;
        position: relative;
        display: flex;  // flex布局
        flex-direction: column;
        word-wrap: break-word;  // 超长换行
        .card-header{
          margin: 0px 15px 0;
          padding: 0;
          position: relative;
          text-align: right;
          .card-icon{
            border-radius: 3px;
            background-color: #999999;
            color: #fff;
            padding: 15px;
            margin-top: -20px;
            margin-right: 15px;
            float: left;
          }
          .card-icon-warning{
            background: linear-gradient(60deg, #ffa726, #fb8c00);
            box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(255, 152, 0, 0.4);
          }
          .card-icon-success{
            background: linear-gradient(60deg, #66bb6a, #43a047);
            box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(76, 175, 80, 0.4);
          }
          .card-icon-danger{
            background: linear-gradient(60deg, #ef5350, #e53935);
            box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(244, 67, 54, 0.4);
          }
          .card-icon-info{
            background: linear-gradient(60deg, #26c6da, #00acc1);
            box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(0, 188, 212, 0.4);
          }
          .card-category{
            color: #999999;
            font-size: 14px;
          }
        }
        .card-header-icon i {
          font-size: 36px;
          line-height: 56px;
          width: 56px;
          height: 56px;
          text-align: center;
        }
       .card-footer {
          border-top: 1px solid #eee;
          margin-top: 14px;
          padding-top: 10px;
          margin: 0 15px 10px;
          justify-content: space-between;
          align-items: center;
          .stats {
            color: #999999;
            font-size: 12px;
            line-height: 22px;
          }
        }
      }
    }
   .dashboard-content{
    .card {
      box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.14);
      margin: 10px 0px;
      border-radius: 6px;
      color: #333333;
      background: #fff;
      position: relative;
      display: flex;  // flex布局
      flex-direction: column;
      word-wrap: break-word;  // 超长换行
      .card-header{
        margin: 0px 15px 0;
        padding: 0;
        position: relative;
        border:1px soild red;
        margin-top: -30px;
        .card-header-info{
            background: linear-gradient(60deg, #26c6da, #00acc1);
            box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(0, 188, 212, 0.4);
        }
        .card-header-primary{
          box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(156, 39, 176, 0.4);
          background: linear-gradient(60deg, #ab47bc, #8e24aa);
        }
        .card-header-success{
            background: linear-gradient(60deg, #66bb6a, #43a047);
            box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(76, 175, 80, 0.4);
        }
          .card-category{
            color: #FFF;
            font-size: 1.125rem;
            line-height: 1.4em;
            font-weight: 300;
            line-height: 40px;
            border-radius: 3px;
            padding:5px 10px;
          }
      }
    } 
  }
  ul {
    padding: 0px 20px;
    margin-bottom:30px;
  }
  li {
    list-style: none;
    font-size: 14px;
    padding: 6px 0px;
    border-bottom: 1px solid #eee;
  }



  }




</style>


